<template>
	<div>
		<div class="main_home_box public_fonts">
			<el-container>
				<el-aside width="200px" style="background-color: rgba(170,255,127,0.3);">
					<Aside></Aside>
				</el-aside>
				<el-container>
					<el-header style="background-color: #eeeeee;">
						{{count}}
						<Header></Header>
					</el-header>
					<el-main style="background-color: rgba(255,198,255,0.4);">
						<Main></Main>  
					</el-main>
				</el-container>
			</el-container>
			<Demo></Demo>
			<div class="user_info">
				<el-button @click="goOther()">其它页</el-button>
				
				<h1>Hello.</h1>
				<p>My name is Why.</p>
				<p>I am an front-end engineer.</p>
				<p>This is a <a href="#">Vue3.0</a>	 + <a href="#">Vite</a> test project.</p>
				<p>And integrate some third-party libraries.</p>
			</div> 
		</div>
	</div>
</template>

<script>
	import {
		defineComponent,
		onMounted,
		reactive,
		toRefs
	} from "vue";
	
	import { useRouter } from 'vue-router';
	
	import Aside from '../components/layout/Aside.vue';
	import Header from '../components/layout/Header.vue';
	import Main from '../components/layout/Main.vue';
	
	import Demo from '../components/demo.vue';
	
	export default defineComponent({
		name: "Index",
		components: {
			Aside,
			Header,
			Main,
			Demo
		},
		setup(){
			const router = useRouter();
			
			const state = reactive({
				count: 145213,
			});
			
			const goOther = () => {
				router.push('/other')
			};
			
			onMounted(() => {
			});
			
			return {
				...toRefs(state),
				goOther
			};
		}
	});
</script>

<style lang="scss" scoped>
	@import "../assets/css/default_fonts.css";
	@import "../assets/css/public_font_size.scss";
</style>
